<template>
    <div>

        <van-form ref="form">
            <van-field readonly clickable name="食堂" is-link label="食堂" required :value="formData.canteenName"
                placeholder="请选择食堂" @click="showPicker = true" :rules=rules.canteenId />
            <van-field v-model="formData.adviceDesc" name="我的建议" label="我的建议" :rules=rules.adviceDesc required
                maxlength="128" placeholder="请输入我的建议" autosize show-word-limit type="textarea" />
        </van-form>
        <fullLoading v-if="loading"></fullLoading>
        <!-- 食堂名称选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
        <fullscreenModal :modal="fullscreenModal" :editType="'other'" label="选择菜谱调研" :showSave="false"
            @handleClose="fullscreenModal = false">
            <checkItem-form @close="fullscreenModal = false" @handleCheckRefresh="checkRefresh"
                ref="checkItemFormRef" />
        </fullscreenModal>
    </div>

</template>
<script>
    import { add } from '@/api/srvAssurance/smarcatering/myWishMenu';
    import checkItemForm from "./checkItemForm";
    export default {
        components: {
            checkItemForm,
        },
        data() {
            return {
                surList: [],
                showPicker: false,
                formData: {
                    canteenName: '',
                    //食堂
                    canteenId: '',
                    cookbookSurveyId: '',
                    adviceDesc: '',
                },
                rules: {
                    canteenId: [
                        { required: true, message: '请选择食堂', trigger: 'onChange' }
                    ],
                    adviceDesc: [
                        { required: true, message: '请输入我的建议', trigger: 'onBlur' },
                        { pattern: this.$commonReg.textAreaReg, message: this.$commonReg.textAreaMsg, trigger: 'onBlur' }
                    ],
                },
                pickerTime: new Date(),
                canteenList: [],
                loading: false,
                isEdit: false,
                show: false,
                fullscreenModal: false,
            }
        },
        methods: {
            delItem() {
                this.surList = [];
            },
            checkRefresh(item) {
                this.surList = [];
                this.surList.push(item);
                this.fullscreenModal = false;
            },
            onAdd() {
                if (!this.formData.canteenId) {
                    this.$Notify({ type: 'warning', message: '请选择食堂！' });
                    return;
                }
                this.fullscreenModal = true;
                this.$refs.checkItemFormRef.getData(this.formData.canteenId);
            },
            getData(obj) {
                this.isEdit = true;
                for (var key in this.formData) {
                    this.formData[key] = obj.data[key];
                }
            },
            // 保存
            handleSave() {
                this.loading = false;
                this.$refs.form.validate().then(() => {
                    this.loading = true;
                    let formData = {
                        canteenId: this.formData.canteenId,
                        adviceDesc: this.formData.adviceDesc,
                    }
                    add(formData).then(res => {
                        this.loading = false;
                        if (res.code === 1000) {
                            this.$Notify({ type: 'success', message: '保存成功！' });
                            this.$emit('close');
                            this.$emit('refresh');
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                })
            },
            // 食堂名称选择
            onConfirm(item) {
                this.surList = [];
                this.formData.canteenId = item.canteenId;
                this.formData.canteenName = item.canteenName;
                this.showPicker = false;
            },
            // 包间选择
            // 重置表单
            resetForm() {
                this.surList = [],
                    this.showPicker = false,
                    this.formData = {
                        canteenName: '',
                        //食堂
                        canteenId: '',
                        cookbookSurveyId: '',
                        adviceDesc: '',
                    },
                    setTimeout(() => {
                        this.$refs.form.resetValidation();
                    })
                this.loading = false;
                this.isEdit = false;
                this.show = false;
            }
        }
    }
</script>

<style scoped lang='less'>
    .fContentMain {
        /* display: flex; */
        justify-content: space-between;
        align-items: center;
        background: rgb(254, 255, 255);
        color: rgb(51, 51, 51);
        border: 0.1px solid rgb(220, 223, 230);
        border-radius: 6px;
        margin: 10px;
        padding: 10px;

        .contentCC {
            display: flex;
            background: rgb(255, 255, 255);
            color: rgb(51, 51, 51);
            height: 100%;
            justify-content: space-between;
            align-items: stretch;

            .textContent {
                flex: 4 1 0%;

                .title {
                    display: flex;
                    width: 90%;
                    padding: 5px 0px 5px 10px;

                    div:first-child {
                        width: 100px;
                        color: #878888;
                    }

                    div:last-child {
                        width: ~'calc(100% - 100px)';
                        word-break: break-all;
                    }

                }
            }

            .picMain {
                flex: 1 1 0%;

                .pic {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: space-between;
                }
            }
        }


        .contentC {
            display: flex;
            align-items: flex-start;
            background: rgb(255, 255, 255);
            color: rgb(51, 51, 51);
            height: 100%;
            flex-direction: column;
            justify-content: space-between;

            .title {
                display: flex;
                width: 100%;
                margin: 5px 10px;


                div:first-child {
                    width: 100px;
                    color: #878888;
                }

                div:last-child {
                    width: calc(100% - 100px);
                    //font-weight: 500;
                }

            }
        }
    }



    .del {
        background-image: url('../../../../assets/images/del.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 20px;
        width: 20px;
    }
</style>